<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>合伙人申请列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="small" @click="exportExcel">导出Excel</el-button>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="status" placeholder="请选择审核状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" ref="multipleTable" :data="partnerData" element-loading-text="拼命加载中" style="width: 100%;"
            v-horizontal-scroll>
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="phone" label="手机号" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="num" label="身份证" width="160"></el-table-column>
            <el-table-column align="center" sortable prop="localName" label="站点名称" width="150"></el-table-column>
            <el-table-column align="center" sortable prop="local" label="站点位置" width="150"></el-table-column>
            <el-table-column align="center" sortable prop="status" label="审核状态" width="120">
                <template slot-scope="scope">
                    <!-- :formatter="Status" -->
                    <div v-if="scope.row.status === 0" style="color: yellowgreen;">待审核</div>
                    <div v-if="scope.row.status === 1" style="color: green;">审核通过</div>
                    <div v-if="scope.row.status === 2" style="color: red;">审核不通过</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="type" label="证件类型" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="deviceName" label="设备名称" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="deviceNum" label="设备数量" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="memberName" label="合伙人类型" width="150"></el-table-column>
            <el-table-column align="center" sortable label="身份证图片" width="150">
                <template slot-scope="scope">
                    <el-image v-for="(image, index) in scope.row.urls.split(',')" :key="index" :src="image"
                        style="margin-right: 5px; width: 50px;" :preview-src-list="[image]"></el-image>
                    <div v-if="scope.row.urls == null">没有图片</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="image" label="营业执照" width="120">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.image" style="width: 50px;" :src="scope.row.image"
                        :preview-src-list="[scope.row.image]"></el-image>
                    <div v-if="scope.row.image == null">没有图片</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="openPartner(scope.row)">查看详情</el-button>
                    <el-button size="mini" type="primary" @click="upShenhe(scope.row)"
                        v-if="scope.row.status != 1">审核申请</el-button>
                    <el-button size="mini" type="info" v-if="scope.row.status == 1" disabled>审核申请</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 查看详情 -->
        <el-dialog title="合伙人申请详情页：" :visible.sync="editFormDetails">
            <el-form label-width="120px">
                <el-form-item label="姓名：" prop="name">
                    <span v-html="this.Details.name"></span>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                    <span v-html="this.Details.phone"></span>
                </el-form-item>
                <el-form-item label="身份证：" prop="num">
                    <span v-html="this.Details.num"></span>
                </el-form-item>
                <el-form-item label="站点名称：" prop="localName">
                    <span v-html="this.Details.localName"></span>
                </el-form-item>
                <el-form-item label="站点位置：" prop="local">
                    <span v-html="this.Details.local"></span>
                </el-form-item>
                <el-form-item label="审核状态：" prop="status">
                    <span v-if="this.Details.status == 0">待审核</span>
                    <span v-if="this.Details.status == 1">审核通过</span>
                    <span v-if="this.Details.status == 2">审核不通过</span>
                </el-form-item>
                <el-form-item label="证件类型：" prop="type">
                    <span v-html="this.Details.type"></span>
                </el-form-item>
                <el-form-item label="设备名称：" prop="deviceName">
                    <span v-html="this.Details.deviceName"></span>
                </el-form-item>
                <el-form-item label="设备数量：">
                    <span v-html="this.Details.deviceNum"></span>
                </el-form-item>
                <el-form-item label="合伙人类型：">
                    <span v-html="this.Details.memberName"></span>
                </el-form-item>
                <el-form-item label="身份证图片：">
                    <ul style="display: flex; flex-wrap: wrap;overflow: auto; width: 100%;padding:0;margin:0;">
                        <li v-for="url in urlArr" :key="url" style="margin:3px 0 3px 14px">
                            <el-image v-if="url" style="width: 140px;height: 140px;margin-left: 14px;" :src="url"
                                :preview-src-list="[url]"></el-image>
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="营业执照：">
                    <el-image v-if="this.Details.image" style="width: 140px;height: 140px;margin-left: 14px;"
                        :src="this.Details.image" :preview-src-list="[this.Details.image]"></el-image>
                </el-form-item>
                <el-form-item label="创建时间：" prop="createTime">
                    {{ transformDate(this.Details.createTime) }}
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 审核-->
        <el-dialog title="审核界面" :visible.sync="editFormUpShenhe" width="20%">
            <el-form label-width="80px">
                <el-form-item label="审核状态">
                    <el-select v-model="shenhe" placeholder="请选择审核状态">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeUpShenhe()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upShenhePar()">确定</el-button>
            </div>
        </el-dialog>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>
import {
    getChargerApplyList,
    getChargerApplyInfo,
    aduitChargerApply
} from "../../api/userMG";
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            partnerData: [],
            loading: false,
            options: [{
                value: 0,
                label: '待审核'
            }, {
                value: 1,
                label: '审核通过'
            }, {
                value: 2,
                label: '审核不通过'
            }],
            options1: [{
                value: 1,
                label: '审核通过'
            }, {
                value: 2,
                label: '审核不通过'
            }],
            name: '',
            status: '',
            phone: '',
            memberId: '',
            editFormDetails: false,
            Details: [],
            editFormUpShenhe: false,
            shenhe: '',
            urlArr: [],
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
        }
    },
    created() {
        this.getdata(Number(localStorage.getItem("parShenh")) || 1);
    },
    // 注册组件
    components: {
        Pagination
    },
    methods: {
        exportExcel() {
            var parameter = {
                page: -2,
                name: this.name,
                status: this.status,
                phone: this.phone,
                memberId: this.memberId,
            };
            getChargerApplyList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.partnerData = res.data.list;
                    return;
                }
            })
            setTimeout(() => {
                //转换成excel时，使用原始的格式
                var xlsxParam = { raw: true };
                let fix = document.querySelector(".el-table__fixed-right");
                let wb;
                //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
                if (fix) {
                    wb = XLSX.utils.table_to_book(
                        this.$refs.multipleTable.$el.removeChild(fix), xlsxParam
                    );
                    this.$refs.multipleTable.$el.appendChild(fix);
                } else {
                    wb = XLSX.utils.table_to_book(this.$refs.multipleTable.$el, xlsxParam);
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xls",
                    bookSST: true,
                    type: "array",
                });
                try {
                    // 如果是IE浏览器，使用Blob通过navigator.msSaveBlob保存
                    if (navigator.msSaveBlob) {
                        navigator.msSaveBlob(new Blob([wbout], { type: 'application/octet-stream' }), '合伙人申请列表.xlsx');
                    } else {
                        // 在其他浏览器中使用file-saver保存文件
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '合伙人申请列表.xlsx');
                    }
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            }, 1000);
            setTimeout(() => {
                this.getdata(1)
            }, 2000);
        },

        // 修改审核状态
        upShenhePar() {
            let data = {
                id: this.id,
                status: this.shenhe,
            }
            aduitChargerApply(data).then((res) => {
                if (res.code == 200) {
                    this.editFormUpShenhe = false
                    this.$message.success(res.msg)
                    localStorage.setItem("parShenh", this.pageparm.currentPage);
                    location.reload()
                } else {
                    this.editFormUpShenhe = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 关闭审核编辑页
        closeUpShenhe() {
            this.editFormUpShenhe = false
            this.shenhe = ''
            this.$message({
                type: 'info',
                message: '已取消修改'
            })
        },
        // 打开审核编辑页
        upShenhe(row) {
            this.editFormUpShenhe = true;
            this.id = row.id;
            return
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {

                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 打开详情页面
        openPartner(row) {
            this.loading = true;
            this.editFormDetails = true;
            let data = {
                id: row.id
            }
            getChargerApplyInfo(data).then((res) => {
                this.loading = false;
                console.log(res)
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    });
                } else {
                    this.Details = res.data.data;
                    this.urlArr = this.Details.urls.split(',')
                    return;
                }
            })
        },
        // 审核状态
        Status: function (row) {
            if (row.status == 0) {
                return '待审核'
            } else if (row.status == 1) {
                return ' 审核通过 '
            } else if (row.status == 2) {
                return ' 审核不通过 '
            }
        },
        // 重置数据
        chongzhi() {
            this.name = '',
                this.phone = '',
                this.status = '',
                this.memberId = '',
                this.getdata(1)
        },
        // 搜索数据
        search() {
            this.getdata(1);
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getdata(parm.currentPage)
        },
        // 获取数据
        getdata(page) {
            this.loading = true;
            var parameter = {
                page: (page - 1) * 20,
                name: this.name,
                status: this.status,
                phone: this.phone,
                memberId: this.memberId,
            };
            getChargerApplyList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.partnerData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    return;
                }
            })
        },
    }

}
</script>

<style>
li {
    list-style: none;
}
</style>